<template>
    <div class="worksMain">
        
        <div class="position">
            <div class="sub"><em>Excellent designer</em>  优秀设计师</div>
        </div>

        <el-carousel :autoplay="false" :initial-index="initIndex" indicator-position="none" class="swiper_bd" ref="mySilder" @change="changeCarousel">
            <el-carousel-item v-for="(item,index) in list" :key="index">
                <div class="swiper_right">
                    <div class="img">
                        <img :src="item.url+'&spec=1000'" :preview="index" :preview-text="item.title" style="width:100%; height:100%;object-fit:cover;">
                    </div>
                    <div class="about" :class="{'blue_bg':index%3 == 1,'yellow_bg':index%3 == 2}">
                        <h1>{{item.title}}</h1>
                        <div class="line"></div>
                        <div class="info">{{item.info}}</div>
                    </div>
                    <div class="txt">
                        <div class="desc">{{item.desc}}</div>
                        <div class="author">——{{item.author}}</div>
                    </div>
                </div>
                <div class="swiper_left">
                    <template v-if="item.works[0]">
                        <template v-if="item.works[0].method == 'idzp'">
                            <template v-if="item.works[0].type == 'jpg' || item.works[0].type == 'png'">
                                <div class="image_cell1">
                                    <a href="javascript:;" @click="goPath(item.works[0])">
                                        <img :src="item.works[0].url+'&spec=1000'" style="width:100%; height:100%;object-fit:cover;">
                                    </a>
                                </div>
                            </template>
                        </template>
                        <template v-else>
                            <template v-if="item.works[0].type == 'mp4'">
                                <div class="video_cell1">
                                    <video-player class="vjs-custom-skin" :options="videoParam(item.works[0])"></video-player>
                                </div>
                            </template>
                            <template v-else>
                                <div class="image_cell1">
                                    <a href="javascript:;" @click="goPath(item.works[0])">
                                        <img :src="item.works[0].url+'&spec=1000'" style="width:100%; height:100%;object-fit:cover;">
                                    </a>
                                </div>
                            </template>
                        </template>
                    </template>
                    <template v-if="item.works[1]">
                        <template v-if="item.works[1].method == 'idzp'">
                            <template v-if="item.works[1].type == 'jpg' || item.works[1].type == 'png'">
                                <div class="image_cell2">
                                    <a href="javascript:;" @click="goPath(item.works[1])">
                                        <img :src="item.works[1].url+'&spec=1000'" style="width:100%; height:100%;object-fit:cover;">
                                    </a>
                                </div>
                            </template>
                        </template>
                        <template v-else>
                            <template v-if="item.works[1].type == 'mp4'">
                                <div class="video_cell2">
                                    <video-player class="vjs-custom-skin" :options="videoParam(item.works[1])"></video-player>
                                </div>
                            </template>
                            <template v-else>
                                <div class="image_cell2">
                                    <a href="javascript:;" @click="goPath(item.works[1])">
                                        <img :src="item.works[1].url+'&spec=1000'" style="width:100%; height:100%;object-fit:cover;">
                                    </a>
                                </div>
                            </template>
                        </template>
                    </template>
                    <template v-if="item.works[2]">
                        <template v-if="item.works[2].method == 'idzp'">
                            <template v-if="item.works[2].type == 'jpg' || item.works[2].type == 'png'">
                                <div class="image_cell3">
                                    <a href="javascript:;" @click="goPath(item.works[2])">
                                        <img :src="item.works[2].url+'&spec=1000'" style="width:100%; height:100%;object-fit:cover;">
                                    </a>
                                </div>
                            </template>
                        </template>
                        <template v-else>
                            <template v-if="item.works[2].type == 'mp4'">
                                <div class="video_cell3">
                                    <video-player class="vjs-custom-skin" :options="videoParam(item.works[2])"></video-player>
                                </div>
                            </template>
                            <template v-else>
                                <div class="image_cell3">
                                    <a href="javascript:;" @click="goPath(item.works[2])">
                                        <img :src="item.works[2].url+'&spec=1000'" style="width:100%; height:100%;object-fit:cover;">
                                    </a>
                                </div>
                            </template>
                        </template>
                    </template>
                </div>
                <div class="num">
                    <span v-if="initIndex+1 > 9 || index+1>9">
                        {{ initIndex ? initIndex+1 : index+1 }}
                    </span>
                    <span v-else>
                        0{{ initIndex ? initIndex+1 : index+1 }}
                    </span>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    import { designer_data } from '@/assets/js/getData';
    import { mapState,mapMutations } from 'vuex';
    import 'vue-video-player/src/custom-theme.css'
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'
    export default {
        name: 'designer',
        data(){
            return {
                date:'',
                list:[],
                initIndex:0,
                curPage:0,
                isMove:true,
            }
        },
        components: {
            videoPlayer
        },
        computed:{
            ...mapState([
                'baseInfo'
            ]),
            isLoad:function(){
                return this.baseInfo.year;
            }
        },
        watch:{
            isLoad:function(val){
                if(val){
                    this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                    this.init();
                }
            },
            $route(){
                this.$refs.mySilder.setActiveItem(this.$route.params.id);
                this.$emit('getpage', {
                    page:this.$route.params.id
                })
            }
        },
        mounted(){
            if(this.$route.params.id){
                this.initIndex = parseInt(this.$route.params.id)
                this.$emit('getpage', {
                    page:this.$route.params.id
                })
            }
            if(this.baseInfo.year){
                this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                this.init();
            }
        },
        destroyed(){
            // 离开本页面旧移除，除非是进入详情页
            if(this.isMove){
                sessionStorage.removeItem('w_designer');
            }
        },
        methods:{
            ...mapMutations([
                'SETWORKSDETAIL',
                'SETINNOVATEDETAIL'
			]),
            async init(){
                const res = await designer_data({data:encodeURI(JSON.stringify({yf:this.date}))});
                if(res.code == '0'){
                    this.list = res.data;
                    // 回到刚刚点击进入的page
                    if(sessionStorage.getItem('w_designer')){
                        this.$nextTick(()=>{
                            this.$refs.mySilder.setActiveItem(sessionStorage.getItem('w_designer'));
                        })
                    }
                }else{
                    this.$message({
                        showClose:true,
                        message: res.message,
                        type: 'error'
                    });
                }
            },
            goPath(detail){
                this.isMove = false;
                sessionStorage.setItem('w_designer',this.curPage);
                if(detail.method == 'idzp'){
                    this.$router.push('/works/detail/'+detail.id);
                    this.SETWORKSDETAIL('');
                }else{
                    this.$router.push('/innovate/detail/'+detail.id);
                    this.SETINNOVATEDETAIL('');
                }
            },
            changeCarousel(page){
                this.curPage = page;
            },
            videoParam(detail){
                let videoParam = {
                    playbackRates:[ 0.5, 1.0, 1.5, 2.0 ],
                    height: '220',
                    // fluid : true,
                    controlBar : {
                        timeDivider : true,//当前时间和持续时间的分隔符
                        durationDisplay : true,//显示持续时间
                        remainingTimeDisplay : false,//是否显示剩余时间功能
                        fullscreenToggle : true  //全屏按钮
                    },
                    sources : [{
                        type : "video/mp4",
                        src : detail.url
                    }],
                    poster: detail.poster
                }
                return videoParam;
            }
        }
    }
</script>

<style scoped>
    .worksMain{position: relative;height:100%;}

    .position{position: absolute;right:15px;top:10px;}
    .position .sub{line-height:20px;font-size: 12px;text-align:right;color: #7987a3;}
    .position .sub em{font-style: italic;}
    .position .title{width: 84px;line-height:24px;font-size: 14px;text-align:right;color: #353942;float:right;}

    .swiper_bd{height:100%;}
    .swiper_bd >>> .el-carousel__container{height:100%;}
    .swiper_bd >>> .el-carousel__container .el-carousel__item:after{content:"";position: absolute;width:50%;height: 100%;background: url(../../assets/img/shadow.png) no-repeat;top: 0;right: 0;z-index:1;}
    .swiper_bd >>> .el-carousel__arrow{width:60px;height:60px;font-size:24px;}
    .swiper_bd >>> .el-carousel__arrow i{font-weight:bold;}
    .swiper_bd >>> .el-carousel__arrow--left{left:40px;}
    .swiper_bd >>> .el-carousel__arrow--right{right:40px;}
    .swiper_bd img{cursor: pointer;}
    .swiper_bd .num{color:#353942;font-size:16px;position: absolute;right:16px;bottom:16px;font-family: SimSun Regular, SimSun Regular-Regular;line-height:20px;}

    .swiper_right{width:50%;float: left;height:100%;position: relative;}
    .swiper_right .img{width:350px;height:700px;margin:60px 0 60px 60px;}
    .swiper_right .about{background:url(../../assets/img/d_red.png) no-repeat;width:350px;height:134px;position: absolute;bottom:140px;right:-1px;padding:10px 30px 0;box-sizing:border-box;}
    .swiper_right .about.blue_bg{background:url(../../assets/img/d_blue.png) no-repeat;}
    .swiper_right .about.yellow_bg{background:url(../../assets/img/d_yellow.png) no-repeat;}
    .swiper_right .about h1{font-size:30px;color:#fff;line-height:44px;}
    .swiper_right .about .line{width:16px;height:3px;background:#fff;margin:10px 0;}
    .swiper_right .about .info{font-size:12px;color:#fff;line-height:20px;}
    .swiper_right .txt{width:130px;position: absolute;top:60px;right:30px;}
    .swiper_right .txt .desc{color: #556584;line-height:20px;font-size:12px;}
    .swiper_right .txt .author{font-size:24px;margin-top:16px;text-align:right;}
    
    .swiper_left{width:50%;float:right;height:100%;position: relative;z-index:9;}
    .image_cell1{width:330px;position: absolute;height:220px;left:132px;top:60px;}
    .image_cell2{width:330px;position: absolute;height:220px;left:132px;top:300px;}
    .image_cell3{width:330px;position: absolute;height:220px;left:132px;top:540px;}
    .video_cell1{width:330px;position: absolute;height:220px;left:132px;top:60px;background:#000;box-sizing:border-box;}
    .video_cell2{width:330px;position: absolute;height:220px;left:132px;top:300px;background:#000;box-sizing:border-box;}
    .video_cell3{width:330px;position: absolute;height:220px;left:132px;top:540px;background:#000;box-sizing:border-box;}
</style>